<script setup>
  import { ref, watch } from 'vue'
  import router from '@/router'
  import { codeStore } from '__store/code'
  import dt from '@dt/dt'
  const items = ref([])
  const [current, currentName, temp, flag] = [ref(), ref(), ref(), ref(false)]

  const remindArr = ref(['contract/contractStart/startSign'])
  watch(
    () => router.currentRoute.value,
    (route) => {
      let item = {
        meta: route.meta,
        name: route.name,
        params: route.params,
        query: route.query
      }
      current.value = item
      currentName.value = route.name
      if (route.meta.name) {
        let has = null
        items.value.some((itm) => {
          if (itm.name == route.meta.name) has = itm
          return itm.name == route.meta.name
        })
        if (has) Object.assign(has, item)
        else items.value.push(item)
      }
    },
    { immediate: true }
  )

  watch(
    () => current.value,
    (res) => router.push(res)
  )

  watch(
    () => currentName.value,
    (res) => {
      if (remindArr.value.includes(res) || flag.value) {
        temp.value = res
        current.value = items.value.filter((itm) => itm.name == res)[0]
        flag.value = false
      } else {
        isRemind(res)
      }
    }
  )

  watch(
    () => codeStore().code,
    () => {
      let tmp = []
      items.value.forEach((itm) => {
        if (codeStore().canShowMenu(itm.meta.code)) tmp.push(itm)
      })
      items.value = tmp
    }
  )

  function onClose(name) {
    let index = items.value.findIndex((itm) => itm.name == name)
    items.value.splice(index, 1)
  }

  const beforeRemove = () => {
    if (remindArr.value.includes(current.value.name)) {
      return new Promise((resolve, reject) => {
        dt.ui.Modal.confirm({
          title: `提示`,
          content: `关闭后未提交内容将会清空，是否确认关闭？`,
          onOk: () => {
            flag.value = true
            resolve()
          },
          onCancel: () => {
            flag.value = false
            reject()
          }
        })
      })
    }
  }

  function isRemind(res) {
    if (remindArr.value.includes(current.value.name)) {
      dt.ui.Modal.confirm({
        title: `提示`,
        content: `关闭后未提交内容将会清空，是否确认关闭？`,
        onOk: () => {
          temp.value = res
          current.value = items.value.filter((itm) => itm.name == res)[0]
        },
        onCancel: () => {
          currentName.value = temp.value
        }
      })
    } else {
      temp.value = res
      current.value = items.value.filter((itm) => itm.name == res)[0]
    }
  }
</script>

<template>
  <div style="padding: 8px 20px; overflow-x: hidden; overflow-y: hidden; width: 100%; left: 40px">
    <div style="display: flex">
      <Tabs type="card" closable @on-tab-remove="onClose" v-model="currentName" :before-remove="beforeRemove">
        <TabPane v-for="i in items" :key="i.name" :name="i.name" :label="i.meta.title"></TabPane>
      </Tabs>
    </div>
  </div>
</template>

<style scoped lang="less">
  @import url('@/assets/css/theme.less');

  :deep(.ivu-tabs-bar) {
    border-bottom: 0 solid white;
  }

  :deep(.ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab) {
    border: 1px solid #dcdee2;
    border-radius: 4px;
  }

  :deep(.ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active) {
    background-color: @primary-color;
    color: white;
  }

  :deep(.ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active .ivu-tabs-close) {
    color: white;
  }

  :deep(.ivu-tabs-nav-container:focus .ivu-tabs-tab-focused) {
    border-color: @primary-color !important;
  }
</style>
